<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>WanaKana.js</title>
  <meta name="author" content="Viet Hoang, viet@tofugu.com">
  <meta name="description" content="The easy way to transliterate between hiragana, katakana, and romaji.">
  <meta name="keywords" content="wanakana, javascript, js, japanese, nihongo, hiragana, katakana, romaji, transliterate, transliteration, ime">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="google" value="notranslate">

  <script type="text/javascript" src="//use.typekit.net/yjj4sov.js"></script>
  <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>

  <link rel="stylesheet" type="text/css" href="assets/css/pure-min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/rainbow-theme.css">
  <link rel="stylesheet" type="text/css" href="assets/css/default.css">
</head>

<body>

  <header>
    <h1>
      <span>W</span>ANAKANA.js
      <small>Mobile-friendly and lightweight
        <br>Japanese Hiragana &amp; Katakana IME</small>
    </h1>
    <div id="download">
      <a class="pure-button" href="https://unpkg.com/wanakana" title="Download WanaKana.js" download>
        Download
        <small>Version <span id="wk-version"></span></small>
      </a>
      <div id="github">
        View project on
        <a href="https://github.com/WaniKani/WanaKana">GitHub</a>
      </div>
    </div>
  </header>

  <div id="content">

    <div class="pure-g-r">
      <div class="pure-u-1">
        <section id="demo-ime">
          <form>
            <textarea id="ime" placeholder="Type in romaji to convert to kana"></textarea>
          </form>
          <div class="code-sample">
            <pre><code data-language="html"><textarea id="ime"></textarea></code></pre>

            <pre><code data-language="javascript">var input = document.getElementById('ime');
wanakana.bind(input);</code></pre>
          </div>
          <!-- code-sample -->
        </section>
        <!-- demo-ime -->
      </div>
    </div>

    <div id="secondary-functions">

      <h2>Additional functions</h2>

      <div class="pure-g-r">
        <div class="pure-u-1-2">

          <section id="demo-kana-to-romaji">
            <form>
              <textarea id="kana-to-romaji" placeholder="Kana string to romaji" lang="ja">にほんごのテスト</textarea>
            </form>
            <div id="kana-to-romaji-output" class="output">
              nihongonotesuto
            </div>
            <!-- output -->
            <div class="code-sample">
              <pre><code data-language="javascript">wanakana.toRomaji(str);</code></pre>
            </div>
            <!-- code-sample -->
          </section>
          <!-- demo-kana-to-romaji -->

        </div>
        <!-- pure-u-1-2 -->
        <div class="pure-u-1-2">

          <section id="demo-romaji-to-kana">
            <form>
              <textarea id="romaji-to-kana" placeholder="Romaji string to kana" lang="ja">TOFUGUnosushi</textarea>
            </form>
            <div id="romaji-to-kana-output" class="output" lang="ja">
              トフグのすし
            </div>
            <!-- output -->
            <div class="code-sample">
              <pre><code data-language="javascript">wanakana.toKana(str);</code></pre>
            </div>
            <!-- code-sample -->
          </section>
          <!-- demo-romaji-to-kana -->

        </div>
        <!-- pure-u-1-2 -->

      </div>
      <!-- pure-g-r -->

      <div class="pure-g-r">
        <div class="pure-u-1-2">

          <section id="demo-romaji-to-hiragana">
            <form>
              <textarea id="romaji-to-hiragana" placeholder="Kana string to romaji" lang="ja">アメリカ</textarea>
            </form>
            <div id="romaji-to-hiragana-output" class="output" lang="ja">
              あめりか
            </div>
            <!-- output -->
            <div class="code-sample">
              <pre><code data-language="javascript">wanakana.toHiragana(str);</code></pre>
            </div>
            <!-- code-sample -->
          </section>
          <!-- demo-romaji-to-hiragana -->

        </div>
        <!-- pure-u-1-2 -->
        <div class="pure-u-1-2">

          <section id="demo-romaji-to-katakana">
            <form>
              <textarea id="romaji-to-katakana" placeholder="Romaji string to kana" lang="ja">わにかに</textarea>
            </form>
            <div id="romaji-to-katakana-output" class="output" lang="ja">
              ワニカニ
            </div>
            <!-- output -->
            <div class="code-sample">
              <pre><code data-language="javascript">wanakana.toKatakana(str);</code></pre>
            </div>
            <!-- code-sample -->
          </section>
          <!-- demo-romaji-to-katakana -->

        </div>
        <!-- pure-u-1-2 -->

      </div>
      <!-- pure-g-r -->

    </div>
    <!-- secondary-functions -->

    <h2>Documentation</h2>
    <div class="pure-g-r">
      <div class="pure-u-1" style="font-size: .65em; text-align: center;">
        View the extended
        <a href="docs/global.html">API</a> including extra conversion and checking methods.
      </div>
    </div>


    <h2>Quick Usage</h2>

    <div class="pure-g-r">
      <div class="pure-u-1">
        <section id="documentation">

          <table>
            <thead>
              <tr>
                <th>Function</th>
                <th>Usage</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>wanakana.bind(
                  <span class="type">element</span>
                  <span class="options">[,
                    <span class="type">options</span>]</span> )</td>
                <td>Automatically bind IME (toKana) functionality to a form textarea or input.</td>
              </tr>
              <tr>
                <td>wanakana.unbind(
                  <span class="type">element</span> )</td>
                <td>Unbind IME from element.</td>
              </tr>
              <tr>
                <td>wanakana.isKana(
                  <span class="type">string</span> )</td>
                <td>Returns true if string contains only Hiragana and/or Katakana.</td>
              </tr>
              <tr>
                <td>wanakana.isHiragana(
                  <span class="type">string</span> )</td>
                <td>Returns false if string contains mixed characters, otherwise true if Hiragana.</td>
              </tr>
              <tr>
                <td>wanakana.isKatakana(
                  <span class="type">string</span> )</td>
                <td>Returns false if string contains mixed characters, otherwise true if Katakana.</td>
              </tr>
              <tr>
                <td>wanakana.toKana(
                  <span class="type">string</span>
                  <span class="options">[,
                    <span class="type">options</span>]</span> )</td>
                <td>Convert Romaji to Kana. outputs Hiragana by default; uppercase text outputs Katakana.</td>
              </tr>
              <tr>
                <td>wanakana.toHiragana(
                  <span class="type">string</span>
                  <span class="options">[,
                    <span class="type">options</span>]</span> )</td>
                <td>Convert Katakana or Romaji to Hiragana.</td>
              </tr>
              <tr>
                <td>wanakana.toKatakana(
                  <span class="type">string</span>
                  <span class="options">[,
                    <span class="type">options</span>]</span> )</td>
                <td>Convert Hiragana or Romaji to Katakana.</td>
              </tr>
              <tr>
                <td>wanakana.toRomaji(
                  <span class="type">string</span>
                  <span class="options">[,
                    <span class="type">options</span>]</span> )</td>
                <td>Convert Kana to Romaji.</td>
              </tr>
              <tr>
                <td>wanakana.stripOkurigana(
                  <span class="type">string</span>
                  <span class="options">[,
                    <span class="type">options</span>]</span> )</td>
                <td>Remove trailing kana.</td>
              </tr>
              <tr>
                <td>wanakana.tokenize(
                  <span class="type">string</span>
                  <span class="options">[,
                    <span class="type">options</span>]</span> )</td>
                <td>Split text into language/kana tokens.</td>
              </tr>
              <tr>
                <td>
                  <span class="type">options</span> = {
                  <br>
                  <span class="indent">
                    IMEMode: false,
                  </span>
                  <span class="indent">
                    useObsoleteKana: false
                  </span>
                  <span class="indent">
                    passRomaji: false,
                  </span>
                  <span class="indent">
                    upcaseKatakana: false,
                  </span>
                  <span class="indent">
                    convertLongVowelMark: true,
                  </span>
                  <span class="indent">customKanaMapping: {},</span>
                  <span class="indent">customRomajiMapping: {}</span>
                  }
                </td>
                <td>
                  <p>
                    IMEMode: Set true, 'toHiragana', or 'toKatakana' to convert input from a text input as it is typed.
                  </p>
                  <p>useObsoleteKana: Set true to use obsolete characters, such as
                    <span lang="ja">ゐ</span> and
                    <span lang="ja">ゑ</span>
                  </p>
                  <p>passRomaji: Pass through romaji when using toKatakana() or toHiragana()</p>
                  <p>upcaseKatakana: Convert katakana to uppercase when using toRomaji()</p>
                  <p>convertLongVowelMark: Convert 'ー' (e.g. スー to すう) with toHiragana()</p>
                  <p>customKanaMapping: custom map to be merged with default in toKana()</p>
                  <p>customRomajiMapping: custom map to be merged with default in toRomaji()</p>
                </td>
              </tr>
            </tbody>
          </table>

        </section>
        <!-- documentation -->
      </div>
    </div>


    <h2>Community Library Ports</h2>

    <div class="pure-g-r">
      <div class="pure-u-1">
        <section id="ports">

          <table>
            <thead>
              <tr>
                <th>Language</th>
                <th>Library Name</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Python</td>
                <td>
                  <a href="https://github.com/Starwort/wanakana-py" title="View WanaKanaPython">WanaKanaPython</a>
                </td>
              </tr>
              <tr>
                <td>Java</td>
                <td>
                  <a href="https://github.com/MasterKale/WanaKanaJava" title="View WanaKanaJava">WanaKanaJava</a>
                </td>
              </tr>
              <tr>
                <td>Rust</td>
                <td>
                  <a href="https://github.com/PSeitz/wana_kana_rust" title="View WanaKanaRust">WanaKanaRust</a>
                </td>
              </tr>
              <tr>
                <td>Swift</td>
                <td>
                  <a href="https://github.com/profburke/WanaKanaSwift" title="View WanaKanaSwift">WanaKanaSwift</a>
                </td>
              </tr>
              <tr>
                <td>Kotlin</td>
                <td>
                  <a href="https://github.com/esnaultdev/wanakana-kt" title="View WanaKanaKotlin">WanaKanaKotlin</a>
                </td>
              </tr>              
              <tr>
                <td>C#</td>
                <td>
                  <a href="https://github.com/kmoroz/WanaKanaShaapu" title="View WanaKanaShaapu">WanaKanaShaapu</a>
                </td>
              </tr>
              <tr>
                <td>Go</td>
                <td>
                  <a href="https://github.com/deelawn/wanakana" title="View WanaKanaGo">WanaKanaGo</a>
                </td>
              </tr>
            </tbody>
          </table>

        </section>
        <!-- ports -->
      </div>
    </div>

    <footer>
      <div class="pure-g-r">
        <div class="pure-u-1-2">
          <ul id="footer-code-info">
            <li>Code licensed under
              <a href="https://github.com/WaniKani/WanaKana/blob/master/LICENSE" title="View MIT license">MIT</a>
            </li>
            <li>Code authored by
              <a href="https://github.com/mimshwright" title="View Mims H. Wright's Github">Mims H. Wright</a> and
              <a href="https://github.com/DJTB" title="View Duncan Bay's Github">Duncan Bay</a>
            </li>
          </ul>
        </div>
        <div class="pure-u-1-2">
          <ul id="footer-other-info">
            <li>Page authored by
              <a href="https://github.com/vietqhoang" title="View Viet Hoang's Github">Viet Hoang</a>
            </li>
            <li>Project sponsored by
              <a href="https://www.tofugu.com" title="View Tofugu">Tofugu</a> &amp;
              <a href="https://www.wanikani.com" title="View WaniKani">WaniKani</a>
            </li>
          </ul>
        </div>
      </div>
    </footer>

  </div>
  <!-- content -->

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="assets/js/jquery.autosize.min.js" type="text/javascript"></script>
  <script src="assets/js/rainbow.min.js" type="text/javascript"></script>
  <script src="assets/js/wanakana.min.js" type="text/javascript"></script>

  <script type="text/javascript">
    // Google Analytics
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-1960021-32', 'wanakana.com');
    ga('send', 'pageview');

    document.querySelector('#wk-version').textContent = wanakana.VERSION;

    // Bind IME to input
    var inputIME = document.getElementById('ime');
    wanakana.bind(inputIME);

    // Kana to romaji
    var inputKana = document.getElementById('kana-to-romaji');
    var outputRomaji = document.getElementById('kana-to-romaji-output');
    function inputChangedKana(e) {
      outputRomaji.innerHTML = (wanakana.toRomaji(inputKana.value) + '&nbsp;');
    }
    inputKana.addEventListener('input', inputChangedKana);

    // Romaji to kana
    var inputTranslit = document.getElementById('romaji-to-kana');
    var outputKana = document.getElementById('romaji-to-kana-output');
    function inputChangedTranslit(e) {
      outputKana.innerHTML = (wanakana.toKana(inputTranslit.value) + '&nbsp;');
    }
    inputTranslit.addEventListener('input', inputChangedTranslit);

    // Romaji to hiragana
    var inputTranslistHiragana = document.getElementById('romaji-to-hiragana');
    var outputHiragana = document.getElementById('romaji-to-hiragana-output');
    function inputChangedTranslistHiragana(e) {
      outputHiragana.innerHTML = (wanakana.toHiragana(inputTranslistHiragana.value) + '&nbsp;');
    }
    inputTranslistHiragana.addEventListener('input', inputChangedTranslistHiragana);

    // Romaji to katakana
    var inputTranslistKatakana = document.getElementById('romaji-to-katakana');
    var outputKatakana = document.getElementById('romaji-to-katakana-output');
    function inputChangedTranslistKatakana(e) {
      outputKatakana.innerHTML = (wanakana.toKatakana(inputTranslistKatakana.value) + '&nbsp;');
    }
    inputTranslistKatakana.addEventListener('input', inputChangedTranslistKatakana);

    // Misc js

    // Adjust library ports table's first column to match first column width of full documentation table
    function libraryColumnWidth() {
      var columnWidth = $('#documentation th:first-child').width();
      $('#ports th:first-child').css('width', columnWidth);
    }

    $(document).ready(function () {
      $('form textarea').autosize(); // Dynamically size vertical height of textarea
      libraryColumnWidth();
    });

    $(window).resize(function () {
      libraryColumnWidth();
    });

  </script>

</body>

</html>
